<template>
  <div class="article-list">
    <van-pull-refresh
      v-model="refreshingLoading"
      @refresh="getNextPageArticle"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        @load="getNextPageArticle"
        :immediate-check="false"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <article-item
          v-for="obj in articles"
          :key="obj.art_id"
          :article-info="obj"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from './ArticleItem.vue'
import { getArticlesAPI } from '@/api'
export default {
  name: 'ArticleList',
  props: {
    channelId: [String, Number]
  },
  data() {
    return {
      articles: [],
      // 保存上一次的时间戳变量
      PreTimeStamp: '',
      loading: false,
      finished: false,
      error: false,
      refreshingLoading: false
    }
  },
  components: {
    ArticleItem
  },
  created() {
    this.getFirstPageArticle()
  },

  methods: {
    // 获取第一页的文章内容
    async getFirstPageArticle() {
      try {
        const { data } = await getArticlesAPI(this.channelId, +new Date())
        this.articles = data.data.results

        // 保存上一次的事件戳
        this.PreTimeStamp = data.data.pre_timestamp
      } catch (error) {
        if (error.response?.status === 400) {
          this.$toast.fail(error.response.data.message)
        } else {
          throw error
        }
      }
    },
    // 获取后面数据的文章内容
    // offset不是触底触发，是距离有一定的距离的时候触发，immediate-check为true则进入页面会触发一次事件，我们已经获取了下一页的数据，所以设置为false
    async getNextPageArticle() {
      try {
        // if (Math.random() < 0.5) {
        //   throw new Error();
        // }
        const { data } = await getArticlesAPI(this.channelId, this.PreTimeStamp)
        const results = data.data.results
        // 更新我们的数据，把第二次请求的数据添加到第一次请求的数组里面
        if (this.loading) {
          this.articles = [...this.articles, ...results]
        } else {
          this.articles = [...results, ...this.articles]
        }

        // 并且更新我们的事件戳，不然两次的事件戳回相同，一直获取的是同一条数据，并且报错
        this.PreTimeStamp = data.data.pre_timestamp

        // 判断没有数据的话就加载完成
        if (data.data.pre_timestamp === null) {
          // 改为true就不会执行
          this.finished = true
        }
      } catch (error) {
        // 如果网络出现错误，
        this.error = true
      } finally {
        // 不管执行错误的还是正确的代码都会执行这个函数
        this.loading = false
        this.refreshingLoading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
// 盒子滚动的两个条件，盒子要有高度，并且设置overflow属性
// ::-webkit-scrollbar 滚动槽
// ::webkit-scrollbar-thumb 滚动条
.article-list {
  height: calc(100vh - 100px - 92px - 83px);
  overflow: auto; //auto:溢出滚动条 scroll:一直都有滚动条 overlay和auto一样
  &::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #3296fa;
    border-radius: 10px;
  }
}
</style>
